| Fonte: Disponível em: https://www.alura.com.br/artigos/o-que-e-o-dom |
| Acesso em: 09 mar. 2023 |
getElement*¶<div id="a1">
<div id="a1-conteudo">Elemento</div>
</div>
<script>
// selecionando o elemento
let elem = document.getElementById('a1');
// modificando a cor do background
elem.style.background = 'red';
// modificando a cor do fonte
elem.style.color = 'white';
// atribuindo conteúdo
elem.textContent = "Ana";
</script>
a1.style.background = "red";
a1.textContent = "Ana";
a1.style.color = "white";
querySelector*¶<ul>
<li>1.Primeiro</li>
<li>2.Segundo (último)</li>
</ul>
<ul>
<li>3.Primeiro</li>
<li>4.Segundo (último)</li>
</ul>
<script>
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML); // "2.Segundo (último)", "4.Segundo (último)"
}
</script>
matches¶<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>
<script>
// can be any collection instead of document.body.children
for (let elem of document.body.children) {
if (elem.matches('a[href$="zip"]')) {
alert("The archive reference: " + elem.href );
}
}
</script>
<script>
window.onload = function() { // same as window.addEventListener('load', (event) => {
alert('Page loaded');
// image is loaded at this time
alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
};
</script>
<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.